<template>
  <div class="common-layout">
    <el-container>
      <el-header style="line-height:20px;background-color: orange;width: 100%;height: 50px;color: whitesmoke;margin-right: 0px">
        <h1 style="color:#fff;margin: 0;font-size:30px; " >
          <el-button  style="float: right;margin:14px 0 0 5px;color: orange" @click="goUserIndex()">前台预览</el-button>
          <el-button style="float: right;margin:14px 0 0 5px;color: orange" @click="logout()">退出登录</el-button>
          <span style="float: right;font-size:20px; margin-top: 20px">欢迎xxx回来!</span>
        </h1>

      </el-header>
      <el-container>
        <el-aside width="200px" style="height: 100%">
          <el-scrollbar height="700px">
            <router-link :to="item.url" style="text-decoration: none;color: #333" v-for="item in Arr">
              <p  :key="item" class="scrollbar-demo-item">  <el-button type="warning" plain style="width: 200px;height: 50px;" >{{item.Name}}</el-button></p>
            </router-link>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";
import router from "@/router";



const Arr=[
  {Name:"首页",url:'/index'},
  {Name:"广告管理",url:'/advertising'},
  {Name:"留言管理",url:'/message'},
  {Name:"模块管理",url:'/module'},
  {Name:"导航管理",url:'/navigation'},
  {Name:"权限管理",url:'/permission'},
  {Name:"图片管理",url:'/picture'},
  {Name:"产品管理",url:'/products'},
  {Name:"禁忌词管理",url:'/taboowords'},
  {Name:"流量管理",url:'/traffic'},
];



</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>